<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Logistic通运网用户注册</title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body style="background: #80d0ff">
<div class="container">
    <div style="height: 110px; margin-top: 22px">
        <h2 style="display: inline-block">Logistic通运网</h2>&nbsp;&nbsp;<h2 style="display: inline-block">用户注册</h2>
        <p><small><a style="text-decoration: none" th:href="@{'/logisticsPlatform'}">返回首页</a></small></p>
    </div>
</div>
<div style=" width: 100%; height: 545px">
    <div class="container" style="background: white;">
        <div style="margin-top: 50px;">
            <form id="myform" class="form-horizontal" method="post" action="/clientRegisterAfter" onsubmit="return checkPass();" autocomplete="off">
                <div class="form-group">
                    <label for="clientAccount" class="col-sm-2 control-label">用户登录名:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="text" class="form-control" name="clientAccount" id="clientAccount" autofocus required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientPassword" class="col-sm-2 control-label">输入登录密码:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="password" class="form-control" name="clientPassword" id="clientPassword" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientPassword1" class="col-sm-2 control-label">确认登录密码:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="password" class="form-control" name="clientPassword1" id="clientPassword1" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientName" class="col-sm-2 control-label">真实姓名:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="text" class="form-control" name="clientName" id="clientName" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientPhone" class="col-sm-2 control-label">手机号码:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="text" class="form-control" name="clientPhone" id="clientPhone" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientEmail" class="col-sm-2 control-label">用户邮箱:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="text" class="form-control" name="clientEmail" id="clientEmail">
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientQq" class="col-sm-2 control-label">QQ号码:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="text" class="form-control" name="clientQq" id="clientQq">
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientQq" class="col-sm-2 control-label">所在地:</label>
                    <div class="col-sm-10">
                        <select style="width: 130px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="clientProvince" id="province1">
                            <option>请选择</option>
                        </select>
                        <select style="width: 130px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="clientCity" id="city1">
                            <option>请选择</option>
                        </select>
                        <select style="width: 130px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="clientCountry" id="country1">
                            <option>请选择</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clientAddress" class="col-sm-2 control-label">详细街道/门牌号:</label>
                    <div class="col-sm-10">
                        <input style="width: 400px" type="text" class="form-control" name="clientAddress" id="clientAddress">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-info">注册</button>
                        <a style="text-decoration: none" th:href="@{/logisticsPlatform/logIn}"><button type="button" class="btn btn-default">返回登录页面</button></a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <footer class="footer " style="text-align: center">
        <p class="text-muted" style="font-size: 12px; margin-top: 20px">© 2018 通运网 中国互联网举报中心京ICP证1401号京ICP备125439号-3京公网安备</p>
    </footer>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery-3.3.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    $("#clientAccount").blur(function () {
        var accountValue = $("#clientAccount").val();
        $.ajax({
            url: "/checkAccount",
            data: {"account" : accountValue},
            success: function (data) {
                if (data.data.clientAccount !== null){
                    alert("用户名已存在!");
                }
            }
        })
    })
    $("#clientPassword1").blur(function () {
        checkPass();
    })
    function checkPass() {
        var passCheck = $("#clientPassword1").val();
        var pass = $("#clientPassword").val();
        if (passCheck !== pass){
            alert("两次密码不一致!");
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }
        else
            return true;
    }
</script>
<script>
    $(function () {
        ProvinceBind1();

        $("#province1").change(function () {
            CityBind1();
        })

        $("#city1").change(function () {
            CountryBind1();
        })
    })
    function ProvinceBind1() {
        // $("#province1").html("");
        var str = "<option> 请选择省 </option>";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province1").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind1() {
        $("#city1").html("");
        var options = $("#province1 option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city1").html("");
        var str="<option> 请选择市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city1").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind1() {
        $("#country1").html("");
        var options = $("#city1 option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country1").html();
        var str="<option> 请选择县 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country1").append(str);
            }
        });
    }
</script>

</body>
</html>